<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Image Gallery - tmlib ver</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
            }
            
            body {
                background: #eee;
            }
            
            h1 {
                margin: 10px 20px;
            }
            
            #wrapper {
                margin: auto;
                position: absolute;
                width: 520px;
                height: 490px;
                
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: white;
                box-shadow: 0px 0px 8px 0px #aaa, 0px 0px 8px 0px #aaa, 0px 0px 16px 0px #aaa;
            }
            
            /**
             *     スライダ
             */
            ul#slider {
                margin: 20px auto;
                position: relative;
                width: 480px;
                height: 360px;
                
                list-style: none;
            }
            ul#slider li {
                -webkit-transition: 1s;
                -moz-transition: 1s;
                -o-transition: 1s;
                transition: 1s;
                position: absolute;
            }
            ul#slider.normal li:not(:target) {
                opacity: 0.0;
            }
            ul#slider.normal li:target {
            }
            
            /**
             *     サムネイル
             */
            ul#thumb {
                margin: auto;
                padding: 20px;
                width: 520px;
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
                box-shadow: inset 0px 0px 8px 0px #fff;
                
                background-color: black;
                
                list-style: none;
                overflow-x: auto;
            }
            ul#thumb li {
                -webkit-transition: 0.5s;
                -moz-transition: 0.5s;
                -o-transition: 0.5s;
                transition: 0.5s;
                margin: 0px 10px;
            }
            ul#thumb li img {
                border: 1px solid #aaa;
            }
            ul#thumb li:hover {
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
                -o-transform: scale(1.5);
                transform: scale(1.5);
                opacity: 0.75;
                z-index: 0;
            }
            ul#thumb li:not(:hover) {
                z-index: auto;
            }
        </style>
        
        <script src="tmlib.js"></script>
        <script>
            
            var data = [
                {
                    id      : "0",
                    img     : "img/IMG_0061.jpg",
                    width   : 480,
                    height  : 360,
                    alt     : "地元の駅前"
                    
                },
                {
                    id      : "1",
                    img     : "img/IMG_0066.jpg",
                    width   : 480,
                    height  : 360,
                    alt     : "地元の海と空"
                },
                {
                    id      : "2",
                    img     : "img/IMG_0071.jpg",
                    width   : 480,
                    height  : 360,
                    alt     : "地元の海の岩"
                },
                {
                    id      : "3",
                    img     : "img/IMG_0101.jpg",
                    width   : 480,
                    height  : 360,
                    alt     : "地元の夕空"
                },
            ];
            
            TM.main(function(){
                var eResult   = null;
                var eTemplate = null;
                
                eResult   = TM.$id("slider");
                eTemplate = TM.$id("img-template");
                eResult.innerHTML = formatTemplate(eTemplate.innerHTML, data);
                
                eResult   = TM.$id("thumb");
                eTemplate = TM.$id("thumb-template");
                eResult.innerHTML = formatTemplate(eTemplate.innerHTML, data);
            });
            
            /**
             * テンプレートをフォーマット
             * {...} を data で置き換える.
             */
            var formatTemplate = function(template, data) {
                var result = "";
                
                for (var i=0,len=data.length; i<len; ++i) {
                    result += template.format(data[i]);
                }
                
                return result;
            };
            
        </script>
        
    </head>
    
    <body>
        <h1>Image Gallery - tmlib ver</h1>
        <div id="wrapper">
            <ul id="slider" class="normal">
                <script type="template" id="img-template">
                <li id="{id}">
                    <img alt="{alt}" src="{img}" width="{width}" height="{height}" />
                </li>
                </script>
            </ul>
            <ul id="thumb">
                <script type="template" id="thumb-template">
                <li>
                    <a href="#{id}">
                        <img src="{img}" width="50" height="50" />
                    </a>
                </li>
                </script>
            </ul>
        </div>
    </body>
</html>